{include file="Index:header" /}
<div class="articleList container">
    <div class="row">
        <div class="col-md-12">
            <!--single article-->
            <div class="articleContent">
                <!-- 标题 -->
                <div class="title">This request has been blocked; the content must be served over HTTPS.</div>
                <!-- 访问量 ...-->
                <div class="secTitleBar">
                    <ul>
                        <li>分类：<a href="https://huhao.me/linux" rel="category tag">LINUX</a></li>
                        <li>时间：2017-08-02</li>
                        <li>阅读(190)</li>
                        <!--<li><a href="#comments">评论(0)</a></li>-->
                    </ul>
                </div>
                <!-- 内容 -->
                <div class="articleCon post_content">
                    <div>HTTPS 是 HTTP over Secure Socket Layer，以安全为目标的 HTTP 通道，所以在 HTTPS 承载的页面上不允许出现 http 请求，一旦出现就是提示或报错：</div>
                    <div></div>
                    <div>
                        <figure id="attachment_288" style="width: 610px" class="wp-caption alignleft"><img class="size-full wp-image-288" src="https://huhao.me/wp-content/uploads/2017/08/TIM截图20170802100138.png" alt="" srcset="https://huhao.me/wp-content/uploads/2017/08/TIM截图20170802100138.png 610w, https://huhao.me/wp-content/uploads/2017/08/TIM截图20170802100138-300x162.png 300w" sizes="(max-width: 610px) 100vw, 610px" width="610" height="330"><figcaption class="wp-caption-text">Mixed Content: The page at ‘https://www.taobao.com/‘ was loaded over HTTPS, but requested an insecure image ‘http://g.alicdn.com/s.gif’. This content should also be served over HTTPS.<br>HTTPS改造之后，我们可以在很多页面中看到如下警报：</figcaption></figure>
                    </div>
                    <div>
                        <div><img class="aligncenter size-full wp-image-290" src="https://huhao.me/wp-content/uploads/2017/08/TIM截图20170802100640.png" alt="" srcset="https://huhao.me/wp-content/uploads/2017/08/TIM截图20170802100640.png 631w, https://huhao.me/wp-content/uploads/2017/08/TIM截图20170802100640-300x78.png 300w" sizes="(max-width: 631px) 100vw, 631px" width="631" height="164"></div>
                    </div>
                    <div></div>
                    <div>
                        <div>很多运营对 https 没有技术概念，在填入的数据中不免出现 http 的资源，体系庞大，出现疏忽和漏洞也是不可避免的。</div>
                        <div></div>
                        <div>CSP设置upgrade-insecure-requests</div>
                        <div>好在 W3C 工作组考虑到了我们升级 HTTPS 的艰难，在 2015 年 4 月份就出了一个 Upgrade Insecure Requests 的草案（http://www.w3.org/TR/mixed-content/），他的作用就是让浏览器自动升级请求。</div>
                        <div>在我们服务器的响应头中加入：</div>
                        <div>header(“Content-Security-Policy: upgrade-insecure-requests”);</div>
                        <div>我们的页面是 https 的，而这个页面中包含了大量的 http 资源（图片、iframe等），页面一旦发现存在上述响应头，会在加载 http 资源时自动替换成 https 请求。可以查看 google 提供的一个 demo（https://googlechrome.github.io/samples/csp-upgrade-insecure-requests/index.html）：</div>
                        <div><img class="aligncenter size-full wp-image-291" src="https://huhao.me/wp-content/uploads/2017/08/TIM截图20170802100552.png" alt="" srcset="https://huhao.me/wp-content/uploads/2017/08/TIM截图20170802100552.png 654w, https://huhao.me/wp-content/uploads/2017/08/TIM截图20170802100552-300x109.png 300w" sizes="(max-width: 654px) 100vw, 654px" width="654" height="238"></div>
                        <div>不过让人不解的是，这个资源发出了两次请求，猜测是浏览器实现的 bug：</div>
                        <div><img class="aligncenter size-full wp-image-292" src="https://huhao.me/wp-content/uploads/2017/08/TIM截图20170802100606.png" alt="" srcset="https://huhao.me/wp-content/uploads/2017/08/TIM截图20170802100606.png 410w, https://huhao.me/wp-content/uploads/2017/08/TIM截图20170802100606-300x239.png 300w" sizes="(max-width: 410px) 100vw, 410px" width="410" height="327"></div>
                        <div></div>
                        <div>当然，如果我们不方便在服务器/Nginx 上操作，也可以在页面中加入 meta 头：</div>
                        <div>&lt;meta http-equiv=”Content-Security-Policy” content=”upgrade-insecure-requests” /&gt;</div>
                        <div>目前支持这个设置的还只有 chrome 43.0，不过我相信，CSP 将成为未来 web 前端安全大力关注和使用的内容。而 upgrade-insecure-requests 草案也会很快进入 RFC 模式。</div>
                        <div>从 W3C 工作组给出的 example（http://www.w3.org/TR/upgrade-insecure-requests/#examples），可以看出，这个设置不会对外域的 a 链接做处理，所以可以放心使用。</div>
                    </div>
                </div>
                <!-- 标签 -->
                <div class="articleTagsBox">
                    <ul><span>标签：</span> <a href="https://huhao.me/tag/https" rel="tag">HTTPS</a></ul>
                </div>
                <!-- 评论 -->
                <!--<div class="post_content">
                    <div id="comments" class="responsesWrapper">
                        <meta content="UserComments:0" itemprop="interactionCount">
                        <h3 class="comments-title">共有 <span class="commentCount">0</span> 条评论</h3>
                        <ol class="commentlist">
                        </ol>
                        <nav class="navigation comment-navigation u-textAlignCenter" data-fuck="289">
                        </nav>
                        <div id="respond" class="respond" role="form">
                            <h2 id="reply-title" class="comments-title"> <small>
                                <a rel="nofollow" id="cancel-comment-reply-link" href="/289.html#respond" style="display:none;">点击这里取消回复。</a>                </small></h2>
                            <form action="https://huhao.me/wp-comments-post.php" method="post" class="commentform" id="commentform">
                                <textarea class="form-control" rows="3" id="comment" onkeydown="if(event.ctrlKey&amp;&amp;event.keyCode==13){document.getElementById('submit').click();return false};" placeholder="当你的才华还撑不起你的野心时,那你就应该静下心来评论下..." tabindex="1" name="comment"></textarea>
                                <div class="commentform-info">
                                    <label id="author_name" for="author">
                                        <input class="form-control" id="author" tabindex="2" value="" name="author" placeholder="昵称[必填]" required="" type="text">
                                    </label>
                                    <label id="author_email" for="email">
                                        <input class="form-control" id="email" tabindex="3" value="" name="email" placeholder="邮箱[必填]" required="" type="text">
                                    </label>
                                    <label id="author_website" for="url">
                                        <input class="form-control" id="url" tabindex="4" value="" name="url" placeholder="网址(可不填)" type="text">
                                    </label>
                                </div>
                                <div class="btn-group commentBtn" role="group">
                                    <input name="submit" id="submit" class="btn btn-sm btn-danger btn-block" tabindex="5" value="发表评论" type="submit"></div>
                                <input name="comment_post_ID" value="289" id="comment_post_ID" type="hidden">
                                <input name="comment_parent" id="comment_parent" value="0" type="hidden">
                            </form>
                        </div>
                    </div>
                </div>-->
            </div>
            <!--single article-->
        </div>
    </div>
</div>
{include file="Index:floot" /}